<template>
  <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
    <div class="infoModal">平安监控</div>
    <a-form-model style="margin-right:10px" ref="ruleForm"  :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" class="formVideoModel">
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="项目名称" ref="projectName" prop="projectName">
             <a-input v-model="form.projectName" :read-only="readonly" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="区县" ref="country" prop="country">
             <a-input v-model="form.country" :read-only="readonly" />        
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="维护等级" ref="level" prop="level">
             <a-input v-model="form.level" :read-only="readonly" />  
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="资管编号" ref="number" prop="number">
            <a-input v-model="form.number" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="派出所" ref="police" prop="police">
            <a-input v-model="form.police" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="点位名称" ref="siteName" prop="siteName">
            <a-input v-model="form.siteName" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="点位编号" ref="siteNo" prop="siteNo">
            <a-input v-model="form.siteNo" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="立杆类型" ref="poleType" prop="poleType">
            <a-input v-model="form.poleType" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="利旧杆编号" ref="poleNo" prop="poleNo">
             <a-input v-model="form.poleNo" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="探头数量" ref="camera" prop="camera">
            <a-input v-model="form.camera"  :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="上联OLT" ref="olt" prop="olt">
            <a-input v-model="form.olt" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item label="跳纤路由" ref="route" prop="route">
            <a-input v-model="form.route" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="11">
          <a-form-model-item label="第一跳光交名称" ref="lightCross" prop="lightCross">
            <a-input v-model="form.lightCross" :read-only="readonly"/>
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row>
        <a-col :span="24">
          <div class="infoModal">探头设备</div>
        </a-col>
       
        <a-table :pagination="false" style="margin:0 20px 0 20px" :loading="tableLoading" :columns="probeColumns" :data-source="probeData" bordered size="middle">
       
        </a-table>
      </a-row>

      <div style="height:20px"></div>
    </a-form-model>
  </a-modal>
</template>
<script>
import { modifyMonitor, getMonitorById } from '@/api/video'
import CountySelect from '@/views/videoManage/util/countySelect'
export default {
  props: ['id'],
  components: { CountySelect },
  data() {
    return {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      form: { country: '' },
      tableLoading: false,
      probeData: [],
      probeColumns,
    
    }
  },
  created() {
    this.getMonitorByIdFunction()
  },
  methods: {
    //详情查询
    getMonitorByIdFunction() {
      getMonitorById(this.id).then((response) => {
        this.form = response.data
        let probeInfo = {}
        probeInfo.equipmentFactory= response.data.equipmentFactory
        probeInfo.electricPoleNo= response.data.electricPoleNo
        probeInfo.electric= response.data.electric
        probeInfo.equipmentType= response.data.equipmentType
        probeInfo.equipmentModel= response.data.equipmentModel
        probeInfo.key= 1
        this.probeData.push(probeInfo)
         if(response.data.storeSku != null){       
          let info = JSON.parse(response.data.storeSku)
          if(info.probeData != undefined){
            if(info.probeData.length>0){
             this.probeData = this.probeData.concat(info.probeData)
            }
          }
        }

      })
    },
   
    cancelEvent() {
      this.$emit('cancelEvent')
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
  },
}

const probeColumns = [
  {
    title: '设备厂家',
    dataIndex: 'equipmentFactory',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'equipmentFactory' },
  },
  {
    title: '设备型号',
    dataIndex: 'equipmentModel',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'equipmentModel' },
  },
  {
    title: '设备类型',
    dataIndex: 'equipmentType',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'equipmentType' },
  },
  {
    title: '取电信息',
    dataIndex: 'electric',
    width: 100,
    align: 'center',
    scopedSlots: { customRender: 'electric' },
  },
  {
    title: '利旧引电杆编号',
    dataIndex: 'electricPoleNo',
    align: 'center',
    scopedSlots: { customRender: 'electricPoleNo' },
  },

]
</script>
